<script setup lang="ts">
import { ref, watch, type Ref } from 'vue';
import login from '@/components/login.vue';
import register from '@/components/register.vue';
import { useLoginStore } from '@/stores/login';

let loginData = useLoginStore();// 共享的切换组件的数据
let componentName: Ref<any> = ref(login); // 切换的组件
watch(loginData, (newVal, oldVal) => { // 监听切换组件的数据，动态切换组件
    if (newVal.componentName === 'login') {
        componentName.value = login;
    } else {
        componentName.value = register;
    }
})

</script>

<template>
    <div class="container">
        <div class="login-box">
            <div class="left-box">
                <img src="@/assets/images/card-bg.png" alt="">
            </div>
            <div class="right-box">
                <!-- 动态切换注册和登录组件 -->
                <component :is="componentName"></component>
            </div>
        </div>
    </div>
</template>

<style scoped>
.container {
    height: 100vh;
    /* 使container容器和页面同高 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--base-color);
    background-image: url("@/assets/images/main-bg.png");
}


.login-box {
    display: flex;
    width: 1080px;
    height: 480px;
    background-color: rgb(from var(--card-color) r g b / 80%);
}

.left-box {
    flex: 6;
}

.left-box img {
    width: 110%;
    height: 120%;
    margin-left: -150px;
    margin-top: -50px;
}

.right-box {
    flex: 4;
    margin-right: 70px;
}
</style>